<template>
  <el-menu-item v-if="!hasChildren" :index="route.path">
    <el-icon v-if="route.meta?.icon">
      <component :is="getIconComponent(route.meta.icon)" />
    </el-icon>
    <span>{{ route.meta?.title }}</span>
  </el-menu-item>

  <el-sub-menu v-else :index="route.path">
    <template #title>
      <el-icon v-if="route.meta?.icon">
        <component :is="getIconComponent(route.meta.icon)" />
      </el-icon>
      <span>{{ route.meta?.title }}</span>
    </template>
    <template v-for="child in route.children" :key="child.path">
      <MenuItem :route="child" />
    </template>
  </el-sub-menu>
</template>

<script setup>
import * as ElIcons from '@element-plus/icons-vue';

import { computed } from 'vue';

// 接收父组件传递的单个路由数据
const props = defineProps({
  route: {
    type: Object,
    required: true,
  },
});

// 判断当前路由是否有子路由
const hasChildren = computed(() => props.route.children && props.route.children.length > 0);

// 动态获取图标组件
const getIconComponent = (iconName) => {
  return ElIcons[iconName] || ElIcons['Menu']; // 默认图标
};
</script>

<style scoped></style>
